<template>
    <div class="production-order">
        <!-- 操作按钮区 -->
        <div class="action-buttons mb-4">
            <el-button @click="Save" type="primary">保存</el-button>
            <el-button @click="handleSearch">取消</el-button>
            <el-button type="success">审核</el-button>
            <el-button type="default"
                style="background-color: #e0e0e0; color: #666; border-color: #e0e0e0;">反审核</el-button>
        </div>

        <!-- 表单区域 -->
        <el-form :model="formData" label-width="80px" class="mb-4">
            <!-- 第一行：单据编码(带收缩按钮)、业务类型、计划单号、物料编码、图纸号 -->
            <el-row :gutter="16" class="mb-4">
                <el-col :span="5">
                    <el-form-item label="单据编码">
                        <el-input v-model="formData.docCode" disabled placeholder="收缩">
                            <template #append>
                                <el-button link @click="toggleCollapse">
                                    {{ isCollapsed ? '展开' : '收缩' }}
                                </el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <!-- 业务类型列（受控列） -->
                <el-col :span="isCollapsed ? 0 : 5" class="collapsible-column" v-show="!isCollapsed">
                    <el-form-item label="业务类型">
                        <el-select v-model="formData.businessType" placeholder="请选择">
                            <el-option label="装配车间" value="装配车间" />
                            <el-option label="机加工车间" value="机加工车间" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="计划单号">
                        <el-input v-model="formData.planNo" disabled placeholder="请选择">
                            <template #append>
                                <el-button link @click="openPlanDialog" size="small">选择</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="物料编码">
                        <el-input v-model="formData.materialCode" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="图纸号">
                        <el-input v-model="formData.drawingNo" disabled />
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第二行：单据日期、操作员（受控列）、跟单编号、物料名称、工艺路线 -->
            <el-row :gutter="16" class="mb-4">
                <el-col :span="5">
                    <el-form-item label="单据日期">
                        <el-date-picker v-model="formData.docDate" type="date" value-format="yyyy-MM-dd"
                            placeholder="2025-04-24" />
                    </el-form-item>
                </el-col>
                <!-- 操作员列（受控列） -->
                <el-col :span="isCollapsed ? 0 : 5" class="collapsible-column" v-show="!isCollapsed">
                    <el-form-item label="操作员">
                        <el-input v-model="formData.operator" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="跟单编号">
                        <el-input v-model="formData.followNo" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="物料名称">
                        <el-input v-model="formData.materialName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="工艺路线">
                        <el-input v-model="formData.processRoute" disabled readonly>
                            <template #append>
                                <el-button link @click="openProcessDialog">选择</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第三行：单据状态、审核员（受控列）、订单交期、生产总数、生产线 -->
            <el-row :gutter="16" class="mb-4">
                <el-col :span="5">
                    <el-form-item label="单据状态">
                        <el-input v-model="formData.docStatus" disabled />
                    </el-form-item>
                </el-col>
                <!-- 审核员列（受控列） -->
                <el-col :span="isCollapsed ? 0 : 5" class="collapsible-column" v-show="!isCollapsed">
                    <el-form-item label="审核员">
                        <el-input v-model="formData.approver" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="订单交期">
                        <el-date-picker v-model="formData.deliveryDate" disabled type="date" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="生产总数">
                        <el-input v-model="formData.productionTotal" />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="生产线">
                        <el-input v-model="formData.productionLine" disabled readonly>
                            <template #append>
                                <el-button link @click="openLineDialog">选择</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 第四行：业务状态、审核日期（受控列）、需求日期、备注信息、生产日期、加工时长 -->
            <el-row :gutter="16" class="mb-4">
                <el-col :span="5">
                    <el-form-item label="业务状态">
                        <el-select v-model="formData.businessStatus" placeholder="正常">
                            <el-option label="正常" value="正常" />
                            <el-option label="挂起" value="挂起" />
                            <el-option label="手工关闭" value="手工关闭" />
                            <el-option label="系统关闭" value="系统关闭" />
                        </el-select>据日期
                    </el-form-item>
                </el-col>
                <!-- 审核日期列（受控列） -->
                <el-col :span="isCollapsed ? 0 : 5" class="collapsible-column" v-show="!isCollapsed">
                    <el-form-item label="审核日期">
                        <el-date-picker v-model="formData.approveDate" type="date" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="需求日期">
                        <el-date-picker v-model="formData.demandDate" type="date" disabled placeholder="选择日期" />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="备注信息">
                        <el-input v-model="formData.remark" type="textarea" :rows="2" placeholdocDateder="请输入备注信息" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="生产日期">
                        <el-date-picker v-model="formData.productionDate" type="date" placeholder="选择日期" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="加工时长">
                        <el-input v-model="formData.processTime" placeholder="分钟" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 领料明细 -->
        <div class="section mb-4">
            <h3 class="section-title">领料明细</h3>
            <div class="table-actions d-flex justify-content-end mb-3">
                <el-button type="primary" size="small" plain>领料</el-button>
            </div>
            <el-table :data="materialList" border style="width: 100%" stripe class="table-fixed">
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column label="跟单编号" prop="followNo" width="120" />
                <el-table-column label="单据编码" prop="docCode" width="120" />
                <el-table-column label="单据状态" prop="docStatus" width="80" />
                <el-table-column label="业务状态" prop="businessStatus" width="80" />
                <el-table-column label="生产订单号" prop="productionOrderNo" width="150" />
                <el-table-column label="物料编码" prop="materialCode" width="120" />
                <el-table-column label="物料名称" prop="materialName" width="120" />
                <el-table-column label="领用数量" prop="pickQuantity" width="100" />
                <el-table-column label="出库数量" prop="outQuantity" width="100" />
                <el-table-column label="单据日期" prop="docDate" width="120" />
            </el-table>
            <div v-if="!materialList.length" class="no-data text-center pt-4">暂无数据</div>
        </div>

        <!-- 完工明细 -->
        <div class="section">
            <h3 class="section-title">完工明细</h3>
            <div class="table-actions d-flex justify-content-end mb-3">
                <el-button type="primary" size="small" plain>报工</el-button>
            </div>
            <el-table :data="finishList" border style="width: 100%" stripe class="table-fixed">
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column label="跟单编号" prop="followNo" width="120" />
                <el-table-column label="单据编码" prop="docCode" width="120" />
                <el-table-column label="单据状态" prop="docStatus" width="80" />
                <el-table-column label="业务状态" prop="businessStatus" width="80" />
                <el-table-column label="生产订单号" prop="productionOrderNo" width="150" />
                <el-table-column label="物料编码" prop="materialCode" width="120" />
                <el-table-column label="物料名称" prop="materialName" width="120" />
                <el-table-column label="完工数量" prop="finishQuantity" width="100" />
                <el-table-column label="仓库" prop="warehouse" width="100" />
                <el-table-column label="单据日期" prop="docDate" width="120" />
            </el-table>
            <div v-if="!finishList.length" class="no-data text-center pt-4">暂无数据</div>
        </div>

        <!-- 生产计划选择对话框 -->
        <el-dialog v-model="showPlanDialog" title="选择生产计划" width="80%" center>
            <el-form :model="planSearch" label-width="80px" class="mb-4">
                <el-row :gutter="16" type="flex" justify="space-between" wrap="nowrap">
                    <el-col :span="4">
                        <el-form-item label="跟单编号">
                            <el-input v-model="planSearch.ProductionplanningBId" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="物料编码">
                            <el-input v-model="planSearch.ProductionplanningStatus" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="物料名称">
                            <el-input v-model="planSearch.ProductionplanningWName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="开始日期">
                            <el-date-picker v-model="planSearch.ProductionplanningK" type="date" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="结束日期">
                            <el-date-picker v-model="planSearch.ProductionplanningJ" type="date" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="primary" link @click="searchPlan">搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="16" class="mb-4">
                    <el-col :span="4">
                        <el-button type="warning" plain>半成品</el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="info" plain link @click="queryAllPlan">查询所有</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="planList" border style="width: 100%" stripe>
                <el-table-column label="跟单编号" prop="productionplanningBId" />
                <el-table-column label="订单交期" prop="productionplanningTime" />
                <el-table-column label="计划单号" prop="productionplanningId" />
                <el-table-column label="物料编码" prop="productionplanningLId" />
                <el-table-column label="物料名称" prop="productionplanningWName" />
                <el-table-column label="主计量" prop="productionplanningT" />
                <el-table-column label="计划数量" prop="productionplanningNumer" />
                <el-table-column label="已生产量" prop="productionplanningYNumer" />
                <el-table-column label="未生产量" prop="productionplanningWNumer" />
                <el-table-column label="需求日期" prop="productionplanningXTime" />
                <el-table-column label="操作" width="50">
                    <template #default="scope">
                        <!-- 这里应该使用行中的唯一标识作为label，而不是整个对象 -->
                        <el-radio v-model="selectedPlan" :label="scope.row.productionplanningId" />
                    </template>
                </el-table-column>
            </el-table>

            <div class="dialog-footer mt-4">
                <el-button link @click="showPlanDialog = false">取消</el-button>
                <el-button type="primary" link @click="confirmPlan">确定</el-button>
            </div>
        </el-dialog>

        <!-- 工艺路线选择对话框 -->
        <el-dialog v-model="showProcessDialog" title="选择工艺路线" width="80%" center>
            <el-form :model="processSearch" label-width="80px" class="mb-4">
                <el-row :gutter="16" type="flex" justify="space-between" wrap="nowrap">
                    <el-col :span="4">
                        <el-form-item label="工艺编码">
                            <el-input v-model="processSearch.RoutingId" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="工艺名称">
                            <el-input v-model="processSearch.RoutingName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="primary" link @click="searchProcess">搜索</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="info" plain link @click="queryAllProcess">查询所有</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="processList" border style="width:100%" stripe>
                <el-table-column label="工艺编码" prop="routingId" />
                <el-table-column label="工艺名称" prop="routingName" />
                <el-table-column label="执行方式" prop="routingTime" />
                <el-table-column label="单据日期" prop="routingAddres" />
                <el-table-column label="操作" width="50">
                    <template #default="scope">
                        <el-button link size="small" @click="selectProcess(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="dialog-footer mt-4">
                <el-button link @click="showProcessDialog = false">取消</el-button>
            </div>
        </el-dialog>

        <!-- 产线选择对话框 -->
        <el-dialog v-model="showLineDialog" title="选择产线" width="60%" center>
            <el-table :data="lineList" border style="width: 100%" stripe>
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column label="产线代码" prop="productionlineId" width="120" />
                <el-table-column label="产线名称" prop="productionlineName" />
                <el-table-column label="操作" width="50">
                    <template #default="scope">
                        <el-button link size="small" @click="selectLine(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="dialog-footer mt-4">
                <el-button link @click="showLineDialog = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import axios from 'axios';
import { computed, watchEffect } from 'vue'
import dayjs from 'dayjs'
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElTable } from 'element-plus';
import { saveAs } from 'file-saver';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import { KongaUrl } from '@/axios/axiosHelp'
import { useCounterStore } from "@/stores/counter";

const Store = useCounterStore()
const router = useRouter();
const route = useRoute();


// 收缩状态
const isCollapsed = ref(false);

// 表单数据
const formData = ref({
    docCode: '',             // 单据编码
    businessType: '',              // 业务类型
    planNo: '',             // 计划单号
    materialCode: '',             // 物料编码
    drawingNo: '',                 // 图纸号
    docDate: new Date().toISOString(),                    // 单据日期
    operator: Store.user.userName,                     // 操作员
    followNo: '',            // 跟单编号
    materialName: '',                // 物料名称
    processRoute: '',                   // 工艺路线
    docStatus: '开立',                  // 单据状态
    approver: '',                       // 审核员
    deliveryDate: '',                      // 订单交期
    productionTotal: '',                // 生产总数
    productionLine: '',               // 生产线
    businessStatus: '',                 // 业务状态
    approveDate: '',                      // 审核日期
    demandDate: '',                    // 需求日期
    remark: '',                         // 备注信息
    productionDate: '',                   // 生产日期
    processTime: ''                     // 加工时长
});

// 模拟表格数据
const materialList = ref([
    {
    }
]);

const finishList = ref([
    {
    }
]);

// 收缩/展开切换
const toggleCollapse = () => {
    isCollapsed.value = !isCollapsed.value;
    nextTick(() => {
        // 可在此处添加滚动或动画回调（如有需要）
    });
};

// 取消操作
const handleSearch = () => {
    router.push("/Production");
};

// 生产计划对话框相关
const showPlanDialog = ref(false); // 控制对话框显示
const planSearch = ref({
    PageIdex: 1,
    PageSize: 15,
    ProductionplanningBId: '',
    ProductionplanningStatus: '',
    ProductionplanningWName: '',
    ProductionplanningK: '',
    ProductionplanningJ: '',
}); // 搜索条件
const planList = ref([]); // 原始全量数据
const selectedPlan = ref(null); // 选中的计划

// 初始化模拟数据
const mockPlanData = [{}];
planList.value = mockPlanData;

// 打开对话框
const openPlanDialog = () => {
    showPlanDialog.value = true;
    KongaUrl.get("/shengchandu/api/Production/ProductionplanningQuser", {
        params: {
            PageIdex: planSearch.value.PageIdex,
            PageSize: planSearch.value.PageSize,
            ProductionplanningBId: planSearch.value.ProductionplanningBId,
            ProductionplanningStatus: planSearch.value.ProductionplanningStatus,
            ProductionplanningWName: planSearch.value.ProductionplanningWName,
            ProductionplanningK: planSearch.value.ProductionplanningK,
            ProductionplanningJ: planSearch.value.ProductionplanningJ,
        }
    }).then((res) => {
        console.log(res.data.data);
        planList.value = res.data.data.list || [];
    });
};

// 确认选择
const confirmPlan = () => {
    if (selectedPlan.value) {
        // 根据唯一标识找到对应的行数据
        const selectedRow = planList.value.find(row => row.productionplanningId === selectedPlan.value);
        console.log(selectedRow.productionplanningId)
        if (selectedRow) {
            KongaUrl.get(`/shengchandu/api/Production/ProductionplanningFile?ProductionplanningId=${selectedRow.productionplanningId}`)
                .then(res => {
                    const data = res.data.data[0];
                    formData.value.planNo = data.productionplanningId;
                    formData.value.materialCode = data.productionplanningLId;
                    formData.value.followNo = data.productionplanningBId;
                    formData.value.deliveryDate = new Date(data.productionplanningTime);
                    formData.value.demandDate = new Date(data.productionplanningXTime);
                    formData.value.materialName = data.productionplanningWName;
                    formData.value.productionTotal = parseFloat(data.productionplanningYNumer) + parseFloat(data.productionplanningWNumer);
                    formData.value.drawingNo = "1H-102-08";
                    formData.value.approver = "无";
                    formData.value.approveDate = new Date();
                    showPlanDialog.value = false;
                    nextTick(() => {
                        console.log('视图已更新');
                    });
                })
                .catch(error => {
                    console.error('请求失败，错误信息:', error);
                    ElMessage.error('数据加载失败，请检查网络或联系管理员');
                });
        }
    }
};

// 搜索（模拟，可对接API）
const searchPlan = () => {
    // 实际开发中调用API获取数据，此处简化
};

const queryAllPlan = () => {
    planSearch.value.ProductionplanningBId = '';
    planSearch.value.ProductionplanningStatus = '';
    planSearch.value.ProductionplanningWName = '';
    planSearch.value.ProductionplanningK = '';
    planSearch.value.ProductionplanningJ = '';
    planList.value = mockPlanData;
};

// 工艺路线对话框相关
const showProcessDialog = ref(false); // 控制对话框显示
const processSearch = ref({
    PageIndex: 1,
    PageSize: 10,
    RoutingId: '',
    RoutingName: '',

}); // 搜索条件
const processList = ref([]); // 工艺路线列表

// 打开对话框
const openProcessDialog = () => {
    showProcessDialog.value = true;
    KongaUrl.get("/shengchandu/api/Production/RoutingShow", {
        params: {
            PageIndex: processSearch.value.PageIndex,
            PageSize: processSearch.value.PageSize,
            RoutingId: processSearch.value.RoutingId,
            RoutingName: processSearch.value.RoutingName,
        }
    }).then((res => {
        processList.value = res.data.data.list;
    }))
};

// 搜索工艺路线（模拟数据，实际需调用API）
const searchProcess = () => {
    const filtered = mockProcessData.filter(item =>
        item.code.includes(processSearch.value.code) &&
        item.name.includes(processSearch.value.name)
    );
    processList.value = filtered;
};

// 查询所有
const queryAllProcess = () => {
    processSearch.value.code = '';
    processSearch.value.name = '';
    processList.value = mockProcessData;
};

// 选择工艺路线
const selectProcess = (row) => {
    KongaUrl.get(`/shengchandu/api/Production/RoutingFile?RoutingId=${row.routingId}`).then((res => {
        formData.value.processRoute = res.data.data[0].routingName
        showProcessDialog.value = false;
    }))

};

// 产线选择对话框相关
const showLineDialog = ref(false);
const lineList = ref([]); // 产线列表

// 初始化模拟数据
const Mdsw = ref({
    PageIdex: 1,
    PageSize: 10,
})

const openLineDialog = () => {
    showLineDialog.value = true;
    KongaUrl.get("/shengchandu/api/Production/ProductionlineQuser", {
        params: {
            PageIdex: Mdsw.value.PageIdex,
            PageSize: Mdsw.value.PageSize,
        }
    }).then((res => {
        console.log(res.data.data)
        lineList.value = res.data.data.list;
    }))
};

const selectLine = (row) => {
    KongaUrl.get(`/shengchandu/api/Production/ProductionlineFile?ProductionlineId=${row.productionlineId}`).then((res => {
        formData.value.productionLine = res.data.data[0].productionlineName;
        showLineDialog.value = false;
    }))

};
const Save = () => {
    const from = {
        // "id": "",//生产单号
        // "document_date": "",//单据日期
        // "business_status": "",//业务状态
        // "business_type": "",//业务类型
        // "plan_number": "",//计划单号
        // "material_code": "",//物料编码
        // "operator": "",//操作员
        // "status": "",//单据状态
        // "auditor": "",//审核员
        // "production_qty": "",//生产总数
        // "production_line": "",//生产线
        // "demand_date": "",//需求日期
        // "production_date": "",//生产日期
        // "remarks": "",//备注信息
        // "tuStatus_code": "",//图纸号
        // "tu_status": "",//跟单编号
        // "tu_Name": "",//物料名称
        // "tu_GName": "",//工艺路线
        // "tu_Remark": "",//订单交期
        // "tu_Time": "",//审核日期
        // "tu_typeTime": "",//加工时长

        "id": formData.value.docCode, // 生产单号（单据编码）
        "document_date": dayjs(formData.value.docDate).format('YYYY-MM-DD'), // 转为字符串
        "business_status": formData.value.businessStatus,
        "business_type": formData.value.businessType,
        "plan_number": formData.value.planNo,
        "material_code": formData.value.materialCode,
        "operator": formData.value.operator,
        "status": formData.value.docStatus,
        "auditor": formData.value.approver,
        "production_qty": formData.value.productionTotal.toString(),
        "production_line": formData.value.productionLine,
        "demand_date": dayjs(formData.value.demandDate).format('YYYY-MM-DD'), // 日期处理
        "production_date": dayjs(formData.value.productionDate).format('YYYY-MM-DD'), // 日期处理
        "remarks": formData.value.remark, // 注意拼写（原代码为 `placeholdocDateder`，此处应为 `remark`）
        "tuStatus_code": formData.value.drawingNo, // 图纸号
        "tu_status": formData.value.followNo, // 跟单编号
        "tu_Name": formData.value.materialName, // 物料名称
        "tu_GName": formData.value.processRoute, // 工艺路线
        "tu_Remark": dayjs(formData.value.deliveryDate).format('YYYY-MM-DD'), // 订单交期（日期处理）
        "tu_Time": dayjs(formData.value.approveDate).format('YYYY-MM-DD'), // 审核日期（日期处理）
        "tu_typeTime": formData.value.processTime // 加工时长
    };
    console.log(from)
    KongaUrl.post("/shengchanxie/api/Production/Production_orderAdd", from).then((res => {
        if (res.data.code == 212) {
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
            router.push("/Production")
        }
        else {
            ElMessage.error('添加失败')
        }
    }))
}
</script>

<style scoped>
.production-order {
    padding: 24px;
    background-color: #f0f2f5;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.el-form {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.el-form-item__label {
    font-size: 14px;
    color: #303133;
}

.section {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
}

.table-fixed {
    table-layout: fixed;
}

.no-data {
    padding: 40px 0;
    font-size: 14px;
    color: #909399;
}

.el-button.plain {
    color: #409eff;
    border-color: #dcdfe6;
    background: transparent;
}

.el-input__inner,
.el-textarea__inner {
    border-radius: 6px;
}

.el-date-picker__input {
    border-radius: 6px;
}

.el-table {
    font-size: 14px;
    border-radius: 8px;
    overflow: hidden;
}

.el-table__header-wrapper {
    background-color: #f5f7fa;
}

/* 受控列过渡效果 */
.collapsible-column {
    transition: all 0.3s ease;
    min-width: 0;
    /* 解决弹性布局最小宽度问题 */
}

.pagination {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
}
</style>